<script setup lang="ts">
import useHomeStore from "@/pinia/modules/homeStore";
import useLoginStore from "@/pinia/modules/loginStore";
import { computed, shallowRef } from "vue";
import type { PageDTO } from "@/types/homeType";
import { onLoad } from "@dcloudio/uni-app";
import { storeToRefs } from "pinia";
import Profile from "./components/Profile/Profile.vue";
import Order from "./components/Order/Order.vue";

const homeStore = useHomeStore();
const loginStore = useLoginStore();
const { guessList, total, newList } = storeToRefs(homeStore);
const { userInfo } = storeToRefs(loginStore);
const page = shallowRef<PageDTO>({ page: 1, pageSize: 10 });

const loadingText = computed(() => guessList.value.length >= total.value ? "数据加载完毕!" : "数据正在加载中···");

// 获取猜你喜欢
const fetchGuessList = async () => {
   try {
      await homeStore.fetchGuessList(page.value);
   } catch (error: any) {
      await uni.showToast({ title: error.message, icon: "error" });
   }
};

// 获取新鲜好物
const fetchNewList = async () => {
   try {
      await homeStore.fetchNewList(6);
   } catch (error: any) {
      await uni.showToast({ title: error.message, icon: "error" });
   }
};

onLoad(() => {
   fetchGuessList();
   fetchNewList();
});


</script>

<template>
   <view class="user">
      <!-- 个人资料 -->
      <Profile :user-info="userInfo"></Profile>
      <!-- 我的订单 -->
      <Order></Order>
   </view>
   <!-- 猜你喜欢 -->
   <scroll-view :scroll-y="true" :enable-back-to-top="true" @scrolltolower="fetchGuessList">
      <!--新鲜好物-->
      <GuessCard :list="newList" title="新鲜好物"></GuessCard>
      <GuessCard title="猜你喜欢" :list="guessList" :loading-text="loadingText"></GuessCard>
   </scroll-view>
</template>

<style scoped lang="scss">
page {
   height: 100%;
   overflow: hidden;
   background-color: #f7f7f8;
}

.user {
   padding-top: 20px;
   background-repeat: no-repeat;
   background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/center_bg.png);
   background-size: 100% auto;
}

</style>